<!-- 网点查询 -->
<template>
  <view class="outletQuery">
    <nut-searchbar :clearable="false" placeholder="请选择省/市/区" disabled @change="search" background="#fff"
      v-model="searchValue" @click="openAddress">
      <template v-slot:leftin>
        <Locationg3 size="12" />
      </template>
      <template v-slot:rightin>
        <triangle-down size="12" />
      </template>
    </nut-searchbar>

    <view class="cu-card article place" v-show="isType == 2">
      <view class="cu-item shadow" v-for="item in placeDateList" :key="item.branchCompanyNo">
        <view class="flex align-center padding-l20">
          <view class="place-icon"></view>
          <view class="place-title">{{ item.companyName }}</view>
        </view>
        <view class="place-content solid-bottom::after">
          <view>地址：{{ item.address }}</view>
          <view class="margin-t6">电话：{{ item.tel }}</view>
          <view>经理：{{ item.manager }}</view>
          <view>业务：
            {{ item.cannotbeagent == 'True' ? '不代收货款' : '可代收货款' }}
            {{ item.cannotbearrived == 'True' ? '不到货' : '可到货' }}
            {{ item.cannotbedeliver == 'True' ? '不送货' : '可送货' }}
            {{ item.cannotbereceived == 'True' ? '不接货' : '可接货' }}
            {{ item.cannotcompany == 'True' ? '不是加盟网点' : '是加盟网点' }}
          </view>

        </view>
        <view class="flex align-center place-footer ">
          <view class="flex align-center justify-center width50 padding-t20 padding-b20 solid-right::after"
            @click="lookMap(item)">
            <view class="look-map"></view>
            <view>查看地图</view>
          </view>
          <view class="flex align-center justify-center padding-t20 padding-b20 width50" @click="onCall(item.tel)">
            <view class="call"></view>
            <view>拨打电话</view>
          </view>
        </view>
      </view>
    </view>
    <no-data text="暂无网点信息，请选择省/市/区" v-show="isType == 3"></no-data>
    <SelectAddress :show="isShow" ref="refCity" @selectAddress="selectAddress" class="select_address" showonlyTF="false"
      @close="doClose" />
  </view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Taro, { useReady } from '@tarojs/taro';
import SelectAddress from '@/components/SelectAddress/index.vue'
import noData from '@/components/noData/index.vue'
import { getCompanyAddress } from '@/@api/order';
import { getBranchByArea, getParticulars } from '@/@api/home';
import useUserStore from '@/store/user'
const store = useUserStore();


export interface Branch {
  COMPANYNAME: string,
  tel: string,
  LOCAL: string,
  LAT: string,
  LNG: string,
  BRANCHCOMPANYNO: any,
}

export interface SelectCity {
  carriagetype: string,
  province: string,
  city: string,
  detailaddress: string
}

useReady(() => {
  Taro.setNavigationBarTitle({
    title: '网点查询'
  })
})

const refCity: any = ref<InstanceType<typeof SelectAddress>>()

const isType = ref(1)

const searchValue = ref<string>('')

const placeDateList = ref([])

const isShow = ref(false)

const cityParams = ref<SelectCity>({
  carriagetype: '送货',
  province: '',
  city: '',
  detailaddress: '',
})


function doClose() {
  isShow.value = false
}



onMounted(() => {
  getLocation()
})

// 查看地图
const lookMap = (item) => {
  Taro.openLocation({
    name: item.companyName,
    address: item.address,
    latitude: Number(item.localX),
    longitude: Number(item.localY),
    scale: 18
  })
}

// 拨打电话
const onCall = (tel: string) => {
  Taro.makePhoneCall({
    phoneNumber: tel
  })
}

// 打开地址
const openAddress = () => {
  isShow.value = true
}

// 选择地址
const selectAddress = (params) => {
  cityParams.value.province = params[0]
  cityParams.value.city = params[1]
  cityParams.value.detailaddress = params[2]
  getDateList()
  searchValue.value = params.join('-')

}

// 清空当前
const search = () => {
  cityParams.value.province = ''
  cityParams.value.city = ''
  cityParams.value.detailaddress = ''
  getDateList()
}

// 获取当前位置
const getLocation = () => {
  Taro.getSetting({
    withSubscriptions: true,
    success(res) {
      console.log(res, 155);
      if (!Object.keys(res.authSetting).includes('scope.userLocation')) {
        return Taro.getLocation({
          type: 'wgs84',
          success: function (res) {
            getCity(res.latitude, res.longitude)
          }
        })
      }
      if (!res.authSetting['scope.userLocation']) {
        Taro.showModal({
          title: '注意',
          content: '是否重新授权',
          success() {
            Taro.openSetting({
              withSubscriptions: true,
              success(res) {
                console.log(res, 160);
                Taro.getLocation({
                  type: 'wgs84',
                  success: function (res) {
                    getCity(res.latitude, res.longitude)
                  }
                })
              }
            })
          },
        })
      }
      else {
        Taro.getLocation({
          type: 'wgs84',
          success: function (res) {
            getCity(res.latitude, res.longitude)
          }
        })
      }
    }
  })
}

// 获取当前省市区
async function getCity(lat: number, lng: number) {
  const res = await getCompanyAddress(lng + ',' + lat)
  const data = res.data.data.datas.addressComponent
  cityParams.value.province = data.province
  cityParams.value.city = data.city
  cityParams.value.detailaddress = data.district
  searchValue.value = `${data.province}-${data.city}-${data.district}`
  getDateList()
}

// 获取网点列表
const getDateList = async () => {
  const params = {
    btcId: store.btsId, // 用户ID
    province: cityParams.value.province,
    city: cityParams.value.city,
    administrativeDivision: cityParams.value.detailaddress,
  }
  const res = await getBranchByArea(params)
  console.log(res, '网点查询列表')
  if (res.data.code == 200) {
    placeDateList.value = res.data.rows
    if (placeDateList.value && placeDateList.value.length > 0) {
      isType.value = 2
    } else {
      isType.value = 3
    }
  }
}

async function getBusiness(branchCompanyNo) {
  console.log(branchCompanyNo)
  const params = {
    branchCompanyNo,
  }
  const res = await getParticulars(params)
  console.log(res, 'sss')
}

</script>


<style lang="scss">
.outletQuery {
  height: 100%;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding: 100px 0 20px 0;

  .place-footer {
    display: flex;
    justify-content: space-around;
  }

  .nut-searchbar {
    position: fixed;
    width: 100%;
    height: 100px;
    top: 0;
    background-color: #fff;
    z-index: 100;
  }

  .outletQuery_search {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #FFF;
  }

  .outletQuery_container {
    height: calc(100% - 96rpx);
    background-color: #F5F5F5;
    position: relative;

    &::before {
      content: "";
      display: table;
    }

    .outletQuery_container_empty {
      width: 80%;
      margin: 280rpx auto;
      text-align: center;

      image {
        width: 300rpx;
        height: 344rpx;
      }
    }
  }

  .place {
    .cu-item {
      // padding: 30px 0 0 0
    }

    box-sizing: border-box;
    height:93vh;
    overflow: auto;
    font-size: 30px;

    .place-title {
      color: #252525;
      font-weight: bold;
    }

    .place-icon {
      width: 34px;
      height: 34px;
      background: url('../../assets/images/index/服务查询/shixiaojiage_icon_wangdian@2x.png') no-repeat;
      background-size: cover;
      margin-right: 10px;
    }

    .place-content {
      font-size: 24px;
      padding: 20px;
      color: #666666;
    }

    .place-footer {
      font-size: 28px;
      font-weight: bold;
      color: #252525;

      .look-map {
        width: 28px;
        height: 28px;
        background: url('../../assets/images/index/服务查询/wangdianchaxun_icon_chakanditu@2x.png') no-repeat;
        background-size: cover;
        margin-right: 10px;
      }

      .call {
        width: 28px;
        height: 28px;
        background: url('../../assets/images/index/服务查询/wangdianchaxun_icon_bodadianhua@2x.png') no-repeat;
        background-size: cover;
        margin-right: 10px;
      }
    }
  }

}
</style>




